<template>
	<div class="main">
		<div class="main-header" style="display: flex;justify-content: space-between;">
			<div style="display: flex;">
				<el-input placeholder="请输入" v-model="keyword" class="input-with-select">
					<el-button slot="append" icon="el-icon-search"  @click="searchinfo()"></el-button>
				</el-input>
				<el-select v-model="status" placeholder="请选择" style="margin-left: 20px;">
					<el-option
						v-for="item in statuslist"
						:key="item.value"
						:label="item.label"
						:value="item.value">
						</el-option>
				</el-select>
				<el-button type="primary" style="margin: 0 10px;" @click="searchinfo()">搜索</el-button>
			</div>
			<div style="display: flex;">
				<el-button type="primary" @click="addcustomer()">添加</el-button>
				<!-- <el-button type="primary" @click="selectdel()">批量删除</el-button> -->
				<!-- <el-upload-file :showfile="false" v-model="importindex"  @click="getImportData()"
				accept=".xlsx" style="margin: 0 10px;" title="导入"></el-upload-file> -->
			</div>
		</div>
		<el-table ref="table" class="main-table" :data="memberData" height="100%" border
			header-cell-class-name="main-table-header" @selection-change="onSelectionChange" >
			<el-table-column type="selection" width="40"></el-table-column>
			<!-- <el-table-column align="center" label="id" prop="supplier_id" /> -->
			<!-- <el-table-column align="center" label="客户状态" prop="status" >
			<template slot-scope="scope">
				{{customerstatus[scope.row.status-1]}}
			</template>
			</el-table-column> -->
			
			<el-table-column align="center" label="项目名称" prop="project_name" />
			<el-table-column align="center" label="供应商名称" prop="work_name" />
			<el-table-column align="center" label="发票文件" prop="bill_img" >
				<template slot-scope="scope">
					<div>
						<el-popover
							placement="top-start"
							title=""
							width="200"
							trigger="hover"
							:content="scope.row.bill_img">
							<a slot="reference" download :href="scope.row.bill_img" class="aclass">{{scope.row.bill_img}}</a>
						</el-popover>
					</div>
				</template>
			</el-table-column>
			<el-table-column align="center" label="发票状态" prop="status" >
			<!-- 作废状态1未作废2作废 -->
			<template slot-scope="scope">
				<div v-if="scope.row.status==1">未作废</div>
				<div v-if="scope.row.status==2">已作废</div>
			</template>
			</el-table-column>
			<el-table-column align="center" label="作废原因" prop="cause" >
				<template slot-scope="scope">
					<div>{{scope.row.cause||''}}</div>
				</template>
			</el-table-column>
			<el-table-column align="center" label="创建时间" prop="create_time" >
				<template slot-scope="scope">
					{{scope.row.bill_time|formatDate}}
				</template>
			</el-table-column>
			<el-table-column align="center" label="操作" width="150">
				<template slot-scope="scope">
					<el-button type="primary" v-if="scope.row.status==1" @click.stop="addcustomer(scope.row)" size="small">作废</el-button>
					<el-button type="primary" v-if="scope.row.status==2" disabled @click.stop="addcustomer(scope.row)" size="small">已作废</el-button>
					<!-- <el-button type="primary" @click.stop="del(scope.row)" size="small">删除</el-button> -->
				</template>
			</el-table-column>
		</el-table>
		<el-pagination class="main-pagination" :current-page.sync="page" :page-size="limit" :total="total"
			@current-change="onCurrentChange" layout="total,jumper,prev,pager,next"></el-pagination>
		<el-dialog :visible.sync="dialogVisible" :key="formDataStatus" :title="dialogTitle" append-to-body width="1000px"
			@close="onDialogClose">
			<component :is="dialogView" @update="getMemberData" @search="search" :selection="selection"
				:formData="formData" :ranklist="supplierlist" :source="projectlist" :trade="trade" :customertype="customertype"></component>
		</el-dialog>
		<!-- <Info ref="info" :selection="selection" @close="onDialogClose" /> -->
	</div>
</template>

<script>
	import {
		get,del,post
	} from "@/assets/js/http.js";
	export default {
		name: "view-agreement",
		data() {
			return {
				memberData: [],
				selection: [],
				page: 1,
				limit: 20,
				total: 0,
				dialogVisible: false,
				dialogTitle: "",
				dialogView: "",
				formData: {},//编辑时的详情
				customerstatus:['潜在客户','无意向客户','成交客户'],//客户状态1潜在客户2无意向客户3成交客户
				projectlist:[],//项目列表
				supplierlist:[],//供应商列表
				trade:[],//客户行业
				customertype:[],//客户类型
				ids:[],//批量删除
				importindex:[],//监视导入
				keyword:'',//关键字搜索
				formDataStatus:false,
				info:{},
				infos:{},
				statuslist:[{label:'未作废',value:1},{label:'作废',value:2}],
				status:'',//作废状态1未作废2作废
			};
		},
		filters: {//时间戳
			formatDate(timestamp) {
				const date = new Date(Number(timestamp)*1000);
				const year = date.getFullYear();
				const month = date.getMonth() + 1;
				const day = date.getDate();
				// const h = date.getHours();
				// const m = date.getMinutes();
				// const s = date.getSeconds();
				return `${year}年${month < 10 ? `0${month}` : month}月${
					day < 10 ? `0${day}` : day}日`;
			}
		},
		computed: {
			buttons() {
				return this.$store.state.buttons;
			}
		},
		components: {
			// Photo: () => import("./photo.vue"),
			Add: () => import("./search.vue"),
			Info: () => import("./info.vue"),
			"el-upload-file": () => import("@/components/el-upload-file.vue"),
		},
		watch: {
			importindex() {
				this.getImportData()
				this.getMemberData()
			},
		},
		mounted() {
			this.getMemberData();
			this.getinfolist()
		},
		methods: {
			//作废弹窗
			addcustomer(info) {
				if (info) {
					this.dialogTitle = "作废理由";
					this.formData = info
					this.dialogView = "Add";
					this.dialogVisible = true;
					
				} else {
					this.formData = {}
					this.dialogTitle = "上传发票";
					this.dialogView = "Info";
					this.dialogVisible = true;
				}
			},
			//添加发票
			// addbill(){
			// 	this.dialogTitle = "上传发票";
			// 	this.dialogView = "Info";
			// 	this.dialogVisible = true;
			// },
			//发票作废
			async search(result) {
				const infos = JSON.parse(JSON.stringify(result));
				this.page = 1;
				// console.log(infos, 11,this.dialogTitle);
				// await post({
				// 	url:'/admin/customer.Bill/cancel_bill',
				// 	data:infos
				// })
				if(this.dialogTitle=='作废理由'){
					await post({
						url:'/admin/customer.Bill/cancel_bill',
						data:{
							status:2,//作废状态1未作废2作废
							cause:infos.cause,
							id:infos.id
						}
					})
				}else{
					await post({
						url:'/admin/customer.Bill/add',
						data:infos
					})
				}
				this.formDataStatus = true;
				this.getMemberData()
			},
			//详情
			// async getinfo(info){
			// 	await post({
			// 		url:'/admin/customer.Contract/detail',
			// 		data:{
			// 			id:info.id
			// 		}
			// 	}).then(res=>{
			// 		this.info={}
			// 		this.info = res.row;
			// 		if(this.info.file && (this.info.file.length!==1)) {
			// 			this.info.file = [{ url: this.info.file, name: this.info.file }];
			// 		}
			// 		this.dialogTitle = "编辑";
			// 		this.formData = this.info
			// 		this.dialogView = "Add";
			// 		this.dialogVisible = true;
			// 	})
			// },
			//获取列表
			async getMemberData() {
				const data = await get({
					url: "/admin/customer.Bill/index",
					loading: true,
					params: {
						page: this.page,
						limit: this.limit,
						keyword:this.keyword||'',
						status:this.status
					}
				});
				console.log(data,'data')
				const list = data.data;
				this.total = data.total;
				this.memberData = list;
				this.keyword=""
				this.status=''
			},
			//获取列表客户等级、行业、类型、来源 type:1客户等级2客户来源3客户行业4客户类型
			async getinfolist(){
				await post({
					url:'/admin/customer.Contract/name_list',
				}).then(res=>{
					this.projectlist = res.project
					this.supplierlist = res.supplier
					// console.log(res.project)
					// this.source = res.source
					// this.trade = res.type
					// this.customertype = res.work
				})
			},
			//批量删除
			async selectdel(){
				if(!this.selection){
					this.$message('请选择')
				}else{
					for(let i=0;i<this.selection.length;i++){
						this.ids.push(this.selection[i].id)
					}
					console.log(this.ids)
					this.$confirm("此操作将永久删除文件, 是否继续?", "提示", {
							confirmButtonText: "确定",
							cancelButtonText: "取消",
							type: "warning",
						})
						.then(async () => {
							let query = "?";
							for (let i = 0; i < this.ids.length; i++) {
								const item = this.ids[i];
								console.log(item, 123);
								if (i > 0) {
									query += "&ids[]=" + item;
								} else {
									query += "ids[]=" + item;
								}
							}
							console.log(query,"/admin/customer.Contract/del" + query);
							await del({
								url: "/admin/customer.Contract/del" + query,
								successTip: true,
								loading: true,
							});
							this.ids=[]
							this.getMemberData();
						})
						.catch(() => {
							this.$message({
								type: "info",
								message: "已取消删除",
							});
						});
				}
			},
			//选择
			onSelectionChange(selection) {
				this.selection = selection
				console.log(selection,'selection',this.selection)
			},
			//删除
			del(row) {
				console.log("del", row);
				this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning",
					})
					.then(async () => {
						let ids = [];
						ids.push(row.id);
						ids.map(String);
						console.log(ids, "ids");
						let query = "?";
						for (let i = 0; i < ids.length; i++) {
							const item = ids[i];
							console.log(item, 123);
							if (i > 0) {
								query += "&ids[]=" + item;
							} else {
								query += "ids[]=" + item;
							}
						}
						console.log(query,"/admin/customer.Contract/del" + query);
						await del({
							url: "/admin/customer.Contract/del" + query,
							successTip: true,
							loading: true,
						});
						this.getMemberData();
					})
					.catch(() => {
						this.$message({
							type: "info",
							message: "已取消删除",
						});
					});

			},
			//导入
			async getImportData() {
				console.log(this.importindex,'this.importindex')
				await post({
					url:'/admin/customer.Customer/import_customer',
					data:{
						file:this.importindex[0].url
					}
				})
				this.importindex = []
			},
			//分页
			onCurrentChange(index) {
				this.page = index;
				this.getMemberData();
			},
			//搜索
			searchinfo(){
				if(!this.keyword&&!this.status){
					this.$message('请选择搜索条件')
				}
				console.log(this.status)
				this.page = 1
				this.keyword = this.keyword.trim()
				this.getMemberData();
			},
			onCheck() {
				// this.dialogTitle = "查看客户照片";
				// this.dialogView = "Photo";
				// this.dialogView = "Info";
				// this.dialogVisible = true;
				this.$refs.info.show();
			},
			onSearch() {
				this.dialogTitle = "搜索";
				this.dialogView = "Search";
				this.dialogVisible = true;
			},
			
			onRowClick(row) {
				this.$refs.table.toggleRowSelection(row);
				this.$refs.info.show();
			},
			onDialogClose() {
				this.$refs.table.clearSelection();
				this.info.file =[]
			},
			tapButton(item) {
				if (item.path === "check") {
					this.onCheck();
				} else if (item.path === "search") {
					this.onSearch();
				}
			}
		}
	};
</script>

<style scoped>
	.aclass{
		/* width: 100px; */
		-webkit-line-clamp: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>
